<template>
	<view>
		<order-info :order="order"></order-info>
		<view class="formInfo">
			<u--form
				class="item"
				label-width="100"
				labelPosition="left"
				:model="form"
				:rules="rules"
				ref="uForm">
				<text class="title"> 交车验车单 </text>
				<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>
				<view class="text-line">
					<text class="text-name">车身照片 {{ form.bodyImage.length }}/4</text>
				</view>
				<view class="text-line">
					<sr-upload maxCount="4" @uploadResult="bodyImageChange"></sr-upload>
				</view>

				<view class="text-line">
					<text class="text-name">仪表盘/油表照片 {{ form.panelImage.length }}/2</text>
				</view>
				<view class="text-line">
					<sr-upload maxCount="2" @uploadResult="panelImageChange"></sr-upload>
				</view>

				<view class="text-line">
					<text class="text-name">车辆内饰照片 {{ form.interiorImage.length }}/2</text>
				</view>
				<view class="text-line">
					<sr-upload maxCount="2" @uploadResult="interiorImageChange"></sr-upload>
				</view>

				<view class="text-line">
					<text class="text-name">车辆划痕照片 {{ form.scratchImage.length }}/2</text>
				</view>
				<view class="text-line">
					<sr-upload maxCount="2" @uploadResult="scratchImageChange"></sr-upload>
				</view>
				<!-- <u-form-item label="车辆油量:" prop="fuelCapacity" required ref="fuelCapacity"> -->
				<!-- <u--input v-model="form.fuelCapacity" placeholder="请填写车辆油量"></u--input> -->
				<!-- </u-form-item> -->
				<!-- <u-form-item label="车辆公里数:" prop="vehicleMileage" required ref="vehicleMileage"> -->
				<!-- <u--input v-model="form.vehicleMileage" placeholder="请填写车辆公里数"></u--input> -->
				<!-- </u-form-item> -->
				<u-form-item
					label="车辆油量:"
					prop="fuelCapacity"
					required
					ref="fuelCapacity"
					class="fuelCapacity">
					<!-- <u--input v-model="form.fuelCapacity" placeholder="请填写车辆油量"></u--input> -->
					<view style="width: 100%" v-if="order.control == '0'">
						<view style="width: 85%; display: inline-block">
							<u-slider
								style="width: 340rpx"
								v-model="form.fuelCapacity"
								min="0"
								:max="16"></u-slider>
						</view>
						<view style="width: 10%; display: inline-block">
							<text>{{ form.fuelCapacity }}/16</text>
						</view>
					</view>
					<view style="width: 100%" v-if="order.control == '1'">
						<view>
							<text v-if="form.fuelType == '1'">{{ form.fuelCapacity }} %</text>
							<text v-if="form.fuelType == '0'">{{ form.fuelCapacity }} 升</text>
						</view>
					</view>
				</u-form-item>

				<u-form-item label="车辆公里数:" prop="vehicleMileage" required ref="vehicleMileage">
					<u--input
						v-model="form.vehicleMileage"
						type="number"
						placeholder="请填写车辆公里数"></u--input>
				</u-form-item>
				<u-form-item label="车辆随车物品:" prop="accessoryItems" required ref="accessoryItems">
					<view class="checkbox-box">
						<uni-data-checkbox
							mode="tag"
							multiple
							v-model="accessoryItems"
							:localdata="carAccessoriesList"
							@change="checkAccessories"></uni-data-checkbox>
					</view>
				</u-form-item>
				<u-form-item label="取车时间:" prop="takeAlsoTime" required ref="takeAlsoTime">
					<!-- <u--input v-model="form.takeAlsoTime" placeholder="请选择取车时间"></u--input> -->
					<uni-datetime-picker type="datetime" v-model="form.takeAlsoTime" />
				</u-form-item>
				<u-form-item label="其他描述:" prop="remark" ref="remark">
					<u--textarea
						style="width: 480rpx"
						v-model="form.remark"
						count
						placeholder="请填写其他描述"></u--textarea>
				</u-form-item>
			</u--form>
		</view>
		<!-- </view> -->
		<button type="info" class="sub-btn" @click="distribution">保&nbsp;&nbsp;存</button>
	</view>
</template>

<script>
	import srUpload from "@/components/upload/sr-upload.vue";
	import orderInfo from "./component/orderInfo.vue";
	import * as api from "@/api/order-api.js";
	export default {
		components: {
			srUpload,
			orderInfo,
		},
		data() {
			return {
				show: false,
				order: {},
				takeAlsoTime: Number(new Date()),
				accessoryItems: [],
				form: {
					orderNo: "", //订单编号   必传
					type: 1, //类型(1交车验车,2还车验车)   必传
					fuelCapacity: 0, //车辆油量
					vehicleMileage: undefined, //公里数
					accessoryItems: "", //车辆随车物品(逗号隔开)
					remark: "", //其他描述
					takeAlsoTime: "", //取还车时间
					lkosten: 0.0, //补充油费(还车验车)
					bodyImage: [], //车身照片
					panelImage: [], //仪表盘
					interiorImage: [], //内饰照片
					scratchImage: [], //车辆划痕
					signImage: [], //客户签名
				},
				carAccessoriesList: [],
				rules: {
					fuelCapacity: {
						type: "string",
						required: true,
						message: "请填写车辆油量",
						trigger: ["blur", "change"],
					},
					vehicleMileage: {
						type: "string",
						required: true,
						message: "请填写车辆公里数",
						trigger: ["blur", "change"],
					},
					accessoryItems: {
						type: "string",
						min: 1,
						required: true,
						message: "请选择车辆随车物品",
						trigger: ["change"],
					},
					takeAlsoTime: {
						type: "string",
						min: 2,
						required: true,
						message: "请选择取车时间",
						trigger: ["change"],
					},
				},
			};
		},
		methods: {
			carOil() {
				api.car_oil(this.order.carId).then((res) => {
					if (res.data) {
						this.isVehicleKey = true;
						this.form.fuelCapacity = res.data.fuelLevel;
						this.form.fuelType = res.data.fuelType;
						this.form.vehicleMileage = res.data.mileage;
					} else {
						this.isVehicleKey = false;
					}
				});
			},
			carAccessories() {
				api.car_accessories().then((res) => {
					res.data.map((item) => {
						this.carAccessoriesList.push({
							value: item.dictValue,
							text: item.dictLabel,
						});
					});
				});
			},
			distribution() {
				this.$refs.uForm
					.validate()
					.then((res) => {
						api.delivery(this.form).then((data) => {
							uni.$emit("refreshOrder");
							this.$u.toast("提交成功");
							uni.navigateBack({
								animationDuration: 300,
							});
						});
					})
					.catch((errors) => {
						uni.$u.toast("校验失败");
					});
			},
			checkAccessories() {
				if (this.accessoryItems && this.accessoryItems.length > 0) {
					this.form.accessoryItems = this.accessoryItems.join(",");
				} else {
					this.accessoryItems = "";
				}
			},
			bodyImageChange(data) {
				this.form.bodyImage = data;
			},
			panelImageChange(data) {
				this.form.panelImage = data;
			},
			interiorImageChange(data) {
				this.form.interiorImage = data;
			},
			scratchImageChange(data) {
				this.form.scratchImage = data;
			},
		},
		onLoad: function (option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.order = item;
			this.form.orderNo = this.order.orderNo;
			this.carAccessories();
			this.carOil();
		},
	};
</script>

<style>
	.formInfo {
		margin: 20rpx;
		padding: 20rpx 30rpx;
		background: #ffffff;
		border-radius: 18rpx;
		padding-bottom: 120rpx;
	}

	.text-name {
		width: 155rpx;
		color: #303133;
		font-size: 15px;
	}

	.text-line {
		margin: 0 20rpx 20rpx 20rpx;
	}

	.item {
		margin-bottom: 120rpx;
	}

	.checkbox-box {
		padding: 20rpx;
	}

	.checkbox-item {
		min-width: 165rpx;
		transform: scale(0.9);
	}
</style>
